<template>
	<view class="article-list flex-c">
		<view class="article flex-c mb20" :class="{'radius': radius}" v-for="(article, index) in list" :key="index" @tap="goDetail(article, index)">
			<!-- 主体内容 -->
			<view class="body-info flex-r ac jsb" :class="{'have-img': article.type == 6 && (article.imageUrl || article.videoUrl)}">
				<view class="body-left flex-c">
					<!-- 标题 -->
					<view class="article-title text-hidden two" :class="{'max': article.top || article.hot}">
						<text class="text-primary">{{article.title}}</text>
					</view>
					<!-- 参与人数 -->
					<view class="join-info text-small flex-r ac" v-if="article.type == 6 && article.participateNum">
						<view class="join-user flex-r ac">
							<lazy-image
								v-for="(avatar, index) in article.participateAvatar.slice(0, 5)"
								:key="index" 
								class="user-avatar border-round" 
								:style="'z-index: '+(5-index)+';left:'+(index*32)+'rpx;'" 
								:src="avatar+'?imageView2/1/w/100/h/100/q/50'" 
								type="user"
								fit="cover"
							></lazy-image>
						</view>
						<text class="color-red">{{article.participateNum}}</text>
						<text>人已参与</text>
					</view>
					<!-- 发布时间 -->
					<view class="date-info color-grey flex-r ac text-info" v-if="showFoot && article.type == 6 && article.createTime">
						<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
					</view>
				</view>
				<template v-if="article.type == 6">
					<!-- 话题贴视频 -->
					<view class="body-right video-box flex-r ac jc" v-if="article.videoUrl">
						<lazy-image class="thumb-img inheritwh" :src="article.videoUrl+'?vframe/jpg/offset/1'" fit="cover"></lazy-image>
						<image class="playIcon" src="@/public/images/public/bfj.png" mode="widthFix"></image>
					</view>
					<!-- 话题贴缩略图 -->
					<view class="body-right" v-else-if="article.imageUrl">
						<lazy-image class="thumb-img inheritwh" :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/240/h/180/q/50'" fit="cover"></lazy-image>
					</view>
				</template>
			</view>
			<!-- 投票贴缩略图 -->
			<template v-if="article.type == 7 && article.imageUrl">
				<view class="article-image flex-r" :class="{'full-width': type == 'barhome', 'big-image': article.imageUrl.split(',').length == 1}">
					<lazy-image :src="article.imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'" fit="cover" v-if="article.imageUrl.split(',').length == 1"></lazy-image>
					<template v-else>
						<lazy-image v-for="(img, index) in article.imageUrl.split(',').slice(0, 3)" :src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index" fit="cover"></lazy-image>
					</template>
				</view>
			</template>
			<!-- 投票信息 -->
			<view class="vote-info" v-if="article.type == 7 && article.discussOption">
				<view class="vote-other flex-c ac">
					<template v-for="(vote, indexs) in article.discussOption">
						<view class="vote-item flex-r ac jsb text-small" :class="{'active': vote.voteFlag}" :key="indexs" @tap.stop="voteSubmit(article, indexs)">
							<view class="progress" :style="'width:' + (article.participateNum ? vote.voteNum / article.participateNum * 100 : 0) + '%;'"></view>
							<text class="text-hidden">{{vote.title}}</text>
							<text>{{vote.voteNum}}</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 其他信息 -->
			<view class="foot-info color-grey flex-r ac text-info" v-if="showFoot && article.type == 7 && article.createTime">
				<uni-dateformat :date="article.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
				{{new Date() - new Date(article.createTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
			</view>
			<!-- 球吧信息 -->
			<view class="bar-info flex-r ac" :class="{'border': type == 'experthome' || type == 'memberhome'}">
				<view class="info-left flex-r ac text-info" v-if="showBar && article.forumId" @tap.stop="$CHS.goBarHome(article.forumId, article.blacklist)">
					<lazy-image class="bar-img border-round" :src="article.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
					<text>{{article.forumName}}</text>
				</view>
				<view class="info-left flex-r ac color-grey text-info" v-if="showTime && article.displayTime">
					<uni-dateformat :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
					{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
				</view>
				<view class="info-right flex-r ac text-small">
					<image class="comment-icon" src="@/public/images/bar/comment.png" mode="aspectFit"></image>
					<text>{{article.commentNum || 0}}</text>
					<image class="view-icon" src="@/public/images/bar/views.png" mode="aspectFit"></image>
					<text>{{article.virtualReadNum || 0}}</text>
				</view>
			</view>
			<!-- 热帖置顶信息 -->
			<template v-if="article.top || article.hot">
				<image class="top-hot" src="@/public/images/bar/zdjrt.png" mode="aspectFit" v-if="article.top && article.hot"></image>
				<image class="top-hot" src="@/public/images/bar/zd.png" mode="aspectFit" v-else-if="article.top"></image>
				<image class="top-hot" src="@/public/images/bar/rtz.png" mode="aspectFit" v-else-if="article.hot"></image>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * DiscussList 讨论贴列表
	 * @description 讨论贴列表用于展示话题晒单列表
	 * @property {Array} list 讨论列表数组
	 * @property {String} type = [barhome|experthome|memberhome] 列表类型
	 *  @value barhome 球吧主页讨论贴列表
	 *  @value experthome 专家主页话题列表
	 *  @value memberhome 用户主页话题列表
	 * @property {Boolean} showBar = [true|false] 是否展示球吧信息
	 * @property {Boolean} showTime = [true|false] 是否展示发布时间
	 * @property {Boolean} showFoot = [true|false] 是否展示其他信息
	 * @property {Boolean} radius = [true|false] 是否使用圆角
	 * @example <DiscussList :list="list" type="barhome"></DiscussList>
	 */
	export default {
		name:"DiscussList",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: String,
				default: ''
			},
			showBar: {
				type: Boolean,
				default: true
			},
			showTime: {
				type: Boolean,
				default: false
			},
			showFoot: {
				type: Boolean,
				default: false
			},
			radius: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			articleList() {
				return this.list
			}
		},
		methods: {
			/**
			 * @description 进入详情
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			goDetail(article, index) {
				if(article.blacklist === 1 && (article.userType != 'user' || article.userId != this.user.userId)){
					this.$ShowToast({text: '您已被拉入黑名单，不能访问当前内容', type: 2, time: 3})
					return
				}
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
				if(article.type == 1 || article.type == 99) {
					this.$CHS.goArticleDetail(article.id, params)
				}else if(article.type == 2){
					this.$CHS.goShareDetail(article.id, params)
				}else if(article.type == 6 || article.type == 7){
					this.$CHS.goDiscussDetail(article.id, params)
				}
			},
			/**
			 * @description 提交投票
			 * @param {object} article - 方案数据对象
			 * @param {number} index - 索引
			 */
			voteSubmit(article, index) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.isSubmit){
					return
				}
				let vote = article.discussOption
				let status = vote.every(item => !item.voteFlag)
				if(status){
					this.isSubmit = true
					this.$http.post({
						url: '/api/chtyForumDiscussRecord/add',
						data: {
							id: vote[index].id,
							status: 1
						}
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$ShowToast({text: data.message || '投票成功', type: 1})
							article.participateNum = article.participateNum + 1
							vote[index].voteFlag = true
							vote[index].voteNum = Number(vote[index].voteNum) + 1
						}else{
							this.$ShowToast({text: data.message || '投票失败，请稍后重试', type: 2})
						}
					}).finally(()=>{
						this.isSubmit = false
					})
				}else{
					let params = {barId: article.forumId, barName: article.forumName, barLogo: article.logo, type: article.userType || 'expert'}
					this.$CHS.goDiscussDetail(article.id, params)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-list{
		.article{
			padding: 0 20rpx 20rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			position: relative;
			&.radius{
				border-radius: 10rpx;
			}
			.body-info{
				margin-top: 20rpx;
				&.have-img{
					margin-top: 30rpx;
					.body-left{
						min-height: 180rpx;
						justify-content: space-between;
					}
				}
				.body-left{
					flex: auto;
					align-self: flex-start;
					.article-title{
						word-break: break-all;
						.text-primary{
							line-height: 42rpx;
							font-weight: 500;
						}
						&.max{
							max-width: 620rpx;
						}
					}
					.join-info{
						margin-top: 8rpx;
						.join-user{
							flex: 2;
							position: relative;
							height: 56rpx;
							.user-avatar{
								width: 56rpx;
								height: 56rpx;
								border: 4rpx solid #FFFFFF;
								box-sizing: border-box;
								position: absolute;
							}
						}
						.color-red{
							margin-right: 10rpx;
						}
					}
					.date-info{
						margin-top: 14rpx;
					}
				}
				.body-right{
					margin-left: 30rpx;
					width: 240rpx;
					height: 180rpx;
					.thumb-img{
						border-radius: 10rpx;
					}
					&.video-box{
						position: relative;
						.thumb-img{
							background: #1F2633;
						}
						.playIcon{
							position: absolute;
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
			.article-image{
				flex-wrap: wrap;
				margin-top: 15rpx;
				.lazy-image{
					width: 218rpx;
					height: 164rpx;
					border-radius: 8rpx;
					margin-right: 8rpx; 
				}
				.lazy-image:nth-child(3){
					margin-right: 0;
				}
				&.more{
					justify-content: space-between;
					position: relative;
					.morenum{
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 218rpx;
						height: 164rpx;
						font-size: 40rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.4);
						border-radius: 8rpx;
					}
				}
				&.big-image{
					.lazy-image{
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						margin-right: 0;
					}
				}
				&.full-width{
					.lazy-image{
						width: 226rpx;
						height: 170rpx;
						margin-right: 16rpx; 
					}
					.lazy-image:nth-child(3){
						margin-right: 0;
					}
					&.more{
						.morenum{
							width: 226rpx;
							height: 170rpx;
						}
					}
					&.big-image{
						.lazy-image{
							width: 710rpx;
							height: 400rpx;
							margin-right: 0;
						}
					}
				}
			}
			.match-info{
				margin-top: 10rpx;
				.color-blue{
					margin-right: 10rpx;
				}
			}
			.vote-info{
				margin-top: 5rpx;
				.vote-other{
					.vote-item{
						margin-top: 10rpx;
						width: 100%;
						height: 60rpx;
						background: #FFFFFF;
						border: 1rpx solid #999999;
						border-radius: 60rpx;
						box-sizing: border-box;
						padding: 0 40rpx;
						position: relative;
						overflow: hidden;
						.progress{
							position: absolute;
							left: 0;
							top: 0;
							bottom: 0;
							background: #F2F2F2;
							z-index: 1;
						}
						text{
							z-index: 2;
						}
						&.active{
							border: 1rpx solid #0055FF;
							color: #0055FF;
							.progress{
								background: #E5EFFF;
							}
						}
						.text-hidden{
							max-width: 550rpx;
						}
					}
				}
			}
			.bar-info{
				margin-top: 15rpx;
				.info-left{
					flex: 1;
					justify-content: flex-start;
					.bar-img{
						margin-right: 20rpx;
						width: 48rpx;
						height: 48rpx;
					}
					.text-secondary{
						flex: 2;
					}
				}
				.info-right{
					flex: 2;
					justify-content: flex-end;
					.comment-icon, .view-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.view-icon{
						margin-left: 40rpx;
					}
				}
				&.border{
					margin-top: 20rpx;
					padding-top: 16rpx;
					border-top: 1rpx solid #ededed;
				}
			}
			.foot-info{
				margin-top: 15rpx;
				.views{
					margin-left: 20rpx;
				}
			}
			.result-icon{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				&.readlog{
					top: 80rpx;
				}
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.top-hot{
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: 0;
				right: 20rpx;
			}
		}
		.article:last-child{
			margin-bottom: 20rpx;
		}
		&.border{
			.article{
				border-bottom: 1rpx solid #EDEDED;;
			}
			.article:last-child{
				border: none;
			}
		}
	}
</style>
